<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>华冠超市水果销售系统</title>
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/echarts-wordcloud.min.js"></script>
  <script src="js/china.js"></script>
  <script src="js/index.js"></script>


  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- {#顶部#} -->
  <header>
    <div class="su_name">
      <span>卖场名称：</span>
      <select id="group" onchange="market_update(this.value)">
        <option value="">请选择--</option>
      </select>

      <script type="text/javascript" src="js/taskjs/marketdata.js"></script>

    </div>

    <h1>华冠超市水果销售系统（纯属虚构）</h1>
    <div class="showTime"></div>
    <script src="js/taskjs/time.js"></script>
  </header>

  <!-- {#主体#} -->
  <section class="mainbox">
    <!-- {#    左边#} -->
    <div class="column">
      <div class="panel">
        <h2>水果商品销量</h2>
        <div class="text">
          <div class="left san"></div>
          <div class="right ci">2</div>
        </div>
        <div class="panel-footer"></div>

      </div>
      <div class="panel">
        <h2>水果所属科目</h2>
        <div class="text guan"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h2>卖场销售预算</h2>
        <div class="text">
          <div class="left da">da</div>
          <div class="right xiao">xiao</div>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="column">
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>
              <span>6.14</span>万元
            </li>
            <li>
              <span>708</span>
            </li>
            <li>
              <span>1637</span>
            </li>
            <li>
              <span>11398</span>万元
            </li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>日商</li>
            <li>TC客单数</li>
            <li>AC平均客单交易额</li>
            <li>销售额</li>
          </ul>
        </div>
      </div>
      <div class="map">
        <div class="map1">
          <h2>各省份总销量和门店平均销量</h2>
          <a href="javascripts:;">销量</a>
          <a href="javascripts:;">门店平均销量</a>
        </div>
        <div class="c_map">1</div>
      </div>

    </div>


    <!-- {#    右边#} -->
    <!-- {#    右上#} -->
    <div class="column">
      <div class="panel">
        <h2>水果科目销量</h2>
        <div class="text">
          <div class="left qi">1</div>
          <div class="right zhu">2</div>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h2>华冠超市占全部超市的比重</h2>
        <div class="text pie"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h2>每月增加会员人数</h2>
        <div class="text line"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>
  <script type="text/javascript">
    function market_update(market_name) {
     
      task01(market_name)
      task02(market_name)
      task03(market_name)
      task04(market_name)
      task05(market_name)
      task06(market_name)
      task07(market_name)
      task08(market_name)
      task09(market_name)
      task10(market_name)

    }
    market_update()
  </script>

</body>

</html>